import * as echarts from 'echarts';
export type EChartsCoreOption = echarts.EChartsCoreOption;

export const useEcharts = (elRef: Ref<HTMLDivElement>, options: echarts.EChartsCoreOption) => {
    const charts = shallowRef<echarts.ECharts>();
    let time: string | number | NodeJS.Timeout | null | undefined = null;
    const setOptions = (options: echarts.EChartsCoreOption, isLoading?: boolean) => {
        const optionData = isLoading ? loading() : (options.series as any)[0].data.length ? options : noDataShow();
        charts.value && charts.value.setOption(optionData, true);
    };
    // 初始化
    const initCharts = () => {
        const el = unref(elRef);
        if (!el || !unref(el)) return;
        charts.value = echarts.init(el);
        setOptions(options);
    };
    //加载中
    const loading = () => {
        clearIntervalTime();
        return {
            graphic: {
                elements: [
                    {
                        type: 'group',
                        left: 'center',
                        top: 'center',
                        children: new Array(7).fill(0).map((_val, i) => ({
                            type: 'rect',
                            x: i * 20,
                            shape: {
                                x: 0,
                                y: -40,
                                width: 10,
                                height: 80
                            },
                            style: {
                                fill: '#5470c6'
                            },
                            keyframeAnimation: {
                                duration: 1000,
                                delay: i * 200,
                                loop: true,
                                keyframes: [
                                    {
                                        percent: 0.5,
                                        scaleY: 0.3,
                                        easing: 'cubicIn'
                                    },
                                    {
                                        percent: 1,
                                        scaleY: 1,
                                        easing: 'cubicOut'
                                    }
                                ]
                            }
                        }))
                    }
                ]
            }
        };
    };

    // 显示无数据
    const noDataShow = () => {
        clearIntervalTime();
        return {
            backgroundColor: 'rgba(255,255,255,.03)',
            title: {
                text: `暂无数据`,
                show: true,
                textStyle: {
                    align: 'center',
                    color: '#fff',
                    fontSize: 16
                },
                top: 'center',
                left: 'center'
            }
        };
    };
    // 显示tooltip并洗牌
    const tooltipShuffling = (dataLen: number, timeInterval: number) => {
        clearIntervalTime();
        if (!options.tooltip) return;
        let currentIndex = -1;
        dataLen -= 1;
        time = setInterval(() => {
            if (dataLen <= currentIndex) currentIndex = -1;
            currentIndex++; //++表示每次跳转一个
            charts.value &&
                charts.value.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
        }, timeInterval);
    };
    const clearIntervalTime = () => {
        time && clearInterval(time);
        time = null;
    };
    // 重新窗口变化时，重新计算
    const resize = () => {
        charts.value && charts.value.resize();
    };
    onMounted(() => {
        window.addEventListener('resize', resize);
    });
    onActivated(() => {
        window.addEventListener('resize', resize);
    });
    // 页面keepAlive时，不监听页面
    onDeactivated(() => {
        window.removeEventListener('resize', resize);
    });
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resize);
    });
    return {
        initCharts,
        setOptions,
        tooltipShuffling,
        clearIntervalTime
    };
};
